{% macro news_item_card(news_item) %}
  <article class="rounded-lg border border-base-200 bg-base-100 p-2 shadow-sm">
    <div class="flex flex-col gap-2">
      <div class="flex items-center justify-between gap-2">
        <div class="flex flex-wrap items-start gap-2">
          <h4 class="font-semibold text-base text-base-content highlight break-all" data-testid="news-item-title">
            {{ news_item.title or 'Untitled news item' }}
          </h4>
          {% if news_item.language %}<span class="badge badge-ghost badge-sm uppercase">{{ news_item.language }}</span>{% endif %}
        </div>
        <button type="button"
                class="btn btn-sm btn-outline"
                data-testid="ungroup-newsitem-{{ news_item.id }}"
                hx-vals='{"news_item_ids[]": "{{ news_item.id }}"}'
                hx-post="{{ url_for('assess.ungroup', story_id=news_item.story_id) }}"
                hx-target="#story-{{ news_item.story_id }}"
                hx-select="#story-{{ news_item.story_id }}">Ungroup</button>
      </div>
      {% if news_item.link %}
        <a href="{{ news_item.link }}" target="_blank" rel="noopener" class="link link-primary text-xs inline-flex items-center gap-1">
          {{ heroicon_mini("arrow-top-right-on-square") }}
          <span>{{ news_item.link }}</span>
        </a>
      {% endif %}
      {% if news_item.content %}
        <p class="text-sm leading-relaxed text-base-content/80 whitespace-pre-line highlight">{{ news_item.content }}</p>
      {% endif %}
      <footer class="flex flex-wrap gap-2 text-xs text-base-content/60">
        {% if news_item.source == 'manual' %}<span class="badge badge-info badge-sm self-start">Manually added</span>{% endif %}
        {% if news_item.collected %}
          <span class="badge badge-sm badge-outline">Collected · {{ news_item.collected | format_datetime }}</span>
        {% endif %}
        {% if news_item.published %}
          <span class="badge badge-sm badge-outline">Published · {{ news_item.published | format_datetime }}</span>
        {% endif %}
      </footer>
    </div>
  </article>
{% endmacro %}
